<template>
  <div class="workTicketChange flowCloumn h100">
    <div class="constentmain h100">
      <list-table-new
        v-bind="tableSetting"
        ref="klTable"
        @selectChange="selectChange"
        @selectAll="selectAll"
      ></list-table-new>
    </div>
    <qrCode ref="qrCode" @downLoadSuccess="downLoadSuccess"></qrCode>
    <dialogPublic
      :title="title"
      :show.sync="show"
      width="30%"
      @doClose="() => (show = false)"
      noFootBtn
      :dialogTop="300"
    >
      <el-progress
        :percentage="percentage"
        :color="customColorMethod"
      ></el-progress>
    </dialogPublic>
  </div>
</template>
<script>
import { queryPatrolPointList } from "@/api/productionPlan/patrolPlan.js";
import qrCode from "./qrCode.vue";
export default {
  components: {
    qrCode,
  },
  data() {
    return {
      title: "批量下载",
      show: false,
      tableSetting: {
        selectionShow: true,
        pageConfig: {
          pageCode: "patrolPoint",
          userId: this.$store.getters.userInfo.namePy,
        },
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "input",
              label: "巡视点名称",
              model: "name",
            },
            {
              type: "organization",
              label: "所属单位",
              model: "pointDeptName",
              idsStr: "pointDeptId",
            },
            {
              type: "select",
              label: "巡视类型",
              model: "patrolPointType",
              placeholder: "请输入",
              option: this.$store.getters.dirtData("patrol_point_type"),
            },
            {
              type: "location",
              label: "巡视位置",
              model: "locationName",
              idsStr: "locationId",
            },
            {
              type: "input",
              label: "巡视点编号",
              model: "code",
            },
            {
              type: "userOnly",
              label: "创建人",
              model: "createByName",
              idsStr: "createBy",
            },
            {
              type: "organization",
              label: "创建单位",
              model: "deptName",
              idsStr: "deptId",
            },
            {
              type: "daterange",
              label: "创建时间",
              model: "createTime",
            },
          ],
        },
        //过滤器的值
        filterFormData: {},
        //过滤器的默认值
        defaultFilterData: {},
        userCustomData: [],
        actionList: [
          {
            name: "新建",
            icon: "el-icon-plus",
            disabled: !this.$store.getters.isBtnAuth("add"), //控制按钮的禁用
            content: "未授权功能", //禁用提示内容
            method: (row) => {
              this.goDetailPage(row, "patrolPointDetails", "add");
            },
          },
          {
            name: "批量下载二维码",
            icon: "el-icon-download",
            //disabled: !this.$store.getters.isBtnAuth("downloadQrCode"), //控制按钮的禁用
            content: "未授权功能", //禁用提示内容
            method: (row) => {
              this.downloadQRcode();
            },
          },
        ],
        column: [
          {
            label: "编号",
            prop: "code",
            sortable: "custom",
          },
          {
            label: "巡视点名称",
            prop: "name",
            sortable: "custom",
          },
          {
            label: "所属单位",
            prop: "pointDeptName",
            sortable: "custom",
          },
          {
            label: "巡视类型",
            prop: "patrolPointType",
            sortable: "custom",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "patrol_point_type",
                row.patrolPointType
              );
            },
          },
          {
            label: "巡视位置",
            prop: "locationName",
            sortable: "custom",
          },
          {
            label: "创建单位",
            prop: "deptName",
            sortable: "custom",
          },
          {
            label: "创建人",
            prop: "createByName",
            sortable: "custom",
          },
          {
            label: "创建时间",
            prop: "createTime",
            sortable: "custom",
          },
        ],
        paginationObj: {
          pageSizes: [15, 30, 50, 100,200],
        },
        totalNumber: 0,
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {
            this.goDetailPage(row, "patrolPointDetails", "edit");
          },
        },
        isDisabled: (row) => {
          return row.status != "1" ? true : false;
        },
      },
      timerInterval: null,
      percentage: 0,
      checkData: [],
    };
  },
  created() {
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.$refs.klTable.getTableConfig();
    //this.updateData();
  },
  methods: {
    updateData() {
      this.$refs.klTable.searchData();
    },
    // 获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      queryPatrolPointList(queryData).then((res) => {
        this.$set(this.tableSetting, "tableData", res.data.list);
        this.$set(this.tableSetting, "totalNumber", res.data.total);
      });
    },
    selectAll(selected) {
      this.tableSetting.tableData.forEach((item) => {
        this.selectChange(selected, item);
      });
    },
    //添加或取消已选工单
    selectChange(selected, row) {
      if (selected) {
        this.checkData.push(row.id);
      } else {
        this.checkData.forEach((item, i) => {
          if (item === row.id) {
            this.checkData.splice(i, 1);
          }
        });
      }
    },
    //批量下载二维码
    async downloadQRcode() {
      let data = this.$refs.klTable.getSelectData();
      if (data.length > 0) {
        let list = [];
        data.forEach((item) => {
        list.push({
          name: item.name,
          id: item.id,
          code:item.code
        });
      });
      let time = 50 * list.length;
      this.$refs.qrCode.createQrCode(list, "巡视点", time);
      this.show = true;
      this.percentage = 0;
      this.timerInterval = setInterval(() => {
        let step = parseInt(2000 / list.length);
        this.percentage += step;
        if (this.percentage > 100) {
          this.percentage = 99;
          // this.visible = false;
          // clearInterval(this.timerInterval);
        }
      }, 1000);
      } else {
        this.$message.warning("请先勾选巡视点")
      }
      
    },
    downLoadSuccess() {
      this.percentage = 100;
      this.show = false;
      clearInterval(this.timerInterval);
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    //跳转到详情页
    goDetailPage(row, router, type) {
      const { href } = this.$router.resolve({
        name: router,
        query: {
          id: row ? row.id : "",
          pageType: type ? type : "",
        },
      });
      window.open(href, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
.workTicketChange {
  .constentmain {
    //margin-left: 10px;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
</style>